<template>
	<view>
		<!-- 底部操作面板 -->
		<u-popup v-model="showActionSheet" mode="bottom" border-radius="16">
			<view class="action-sheet">
				<view class="action-sheet-title">聊天设置</view>
				<view class="action-item" @click="handleClearChat" v-if="showClearChat">
					<text class="action-item-text">清除聊天记录</text>
				</view>
				<view class="action-item">
					<text class="action-item-text">模型选择</text>
					<view class="model-select">
						<view 
							v-for="(model, index) in modelList" 
							:key="index" 
							class="model-item" 
							:class="{'model-item-active': currentModel === model.value}"
							@click="handleSelectModel(model.value)"
						>
							<u-icon v-if="currentModel === model.value" name="checkmark-circle" color="#fff" size="24" style="margin-right: 6rpx;"></u-icon>
							<text>{{model.label}}</text>
						</view>
					</view>
				</view>
				<view class="action-cancel" @click="close">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		
		<!-- 右下角操作按钮 -->
		<view class="action-button" @click="showActionSheet = true">
			<u-icon name="setting" color="#fff" size="24"></u-icon>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js'

export default {
	name: 'chat-settings',
	props: {
		modelList: {
			type: Array,
			default: () => []
		},
		currentModel: {
			type: String,
			default: 'gpt-4'
		},
		showClearChat: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showActionSheet: false
		}
	},
	methods: {
		close() {
			this.showActionSheet = false;
		},
		// 清除聊天记录
		handleClearChat() {
			uni.showModal({
				title: '提示',
				content: '确定要清除所有聊天记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.$emit('clearChat');
					}
				}
			});
		},
		// 选择模型
		handleSelectModel(model) {
			// 如果选择的是当前模型，不执行任何操作
			if (this.currentModel === model) {
				uni.showToast({
					title: '当前已是该模型',
					icon: 'none'
				});
				this.showActionSheet = false;
				return;
			}
			this.$emit('selectModel', model);
			this.showActionSheet = false;
		}
	}
}
</script>

<style lang="scss" scoped>
// 底部操作面板样式
.action-sheet {
	padding: 20rpx;
	
	.action-sheet-title {
		text-align: center;
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 0;
		font-weight: bold;
	}
	
	.action-item {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.action-item-text {
			font-size: 30rpx;
			color: #333;
			width: 200rpx;
		}
		
		.switch-wrapper {
			margin-left: 20rpx;
		}
	}
	
	.model-select {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		
		.model-item {
			padding: 12rpx 30rpx;
			background-color: #f7f7f7;
			margin-right: 20rpx;
			margin-top: 16rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			transition: all 0.3s;
			border: 1rpx solid transparent;
		}
		
		.model-item-active {
			background-color: #007AFF;
			color: #fff;
			box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
		}
	}
	
	.action-cancel {
		margin-top: 20rpx;
		padding: 30rpx 0;
		text-align: center;
		font-size: 32rpx;
		color: #007AFF;
	}
}

// 右下角操作按钮
.action-button {
	position: fixed;
	right: 30rpx;
	bottom: 200rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: #007AFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	z-index: 99;
}
</style> 